/** @type {HTMLCanvasElement} */

import Scene from "./Scene.js";
import Player from "./Player.js";
import Monster from "./Monster.js";
import Cyclone from "./Cyclone.js";

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

// 创建场景
const scene = new Scene();

// 创建玩家(出生位置0,0 拥有一只箭矢)
const player = new Player(0, 0, 1);

// 创建旋风
const cyclones = [
    new Cyclone(3, 1),
    new Cyclone(2, 5)
]

// 创建怪兽
const monster = new Monster(3, 3);

// 是否达成游戏目标
let isSuccess = false

//选取两行提示语句
let text1 = document.getElementById("text1");
let text2 = document.getElementById("text2");

// 游戏主函数
function gameLoop() {


    text1.style.visibility = "hidden";
    text2.style.visibility = "hidden";

    //如果玩家进入怪兽所在格子则游戏失败
    if (isSameTile(player, monster)) {
        gameOver("lost");
        return;
    }

    // 杀死怪兽游戏成功
    if (isSuccess == true) {
        player.drawHappyface(ctx);
        gameOver("win");
        return;
    }

    if (player.arrow == 0) {
        if (isSuccess == true) {
            gameOver("win");
            return;
        }
        else {// 如果玩家箭矢用尽且未杀死怪兽则游戏失败
            player.drawCry(ctx);
            gameOver("lost");
            return;
        }
    }

    let pMonster = [monster.x, monster.y];

    // 画出地图
    scene.drawScene(ctx);

    // 画出玩家
    player.drawPlayer(ctx);

    // 画出所有白色方块（玩家已探索的格子）
    drawAllWhteRect(ctx);

    //检测玩家与怪兽是否距离一格
    if (isNextTile(player, monster)) {
        text1.style.visibility = "visible";
        console.log("气息");
    }

    // 检测玩家与旋风是否距离一个或重合
    cyclones.forEach((cyclone) => {
        let pCyclone = [cyclone.x, cyclone.y]
        if (isNextTile(player, cyclone)) {
            text2.style.visibility = "visible"
            console.log("微风");
        }
        // 若玩家坐标与旋风重合则将玩家移动到除旋风和怪兽所在位置以外的随机位置并令该旋风可见
        if (isSameTile(player, cyclone)) {
            let randlocal = randomLocal(pCyclone, pMonster)
            player.x = randlocal[0];
            player.y = randlocal[1];
            whiteRectArray.push({ x: player.x, y: player.y })
            cyclone.visible = true;
        }
        if (cyclone.visible == true) {
            cyclone.drawCyclone(ctx);
        }
    })

    // 控制射击按钮激活与否时的颜色变化
    if (shootbuttonOn == false) {
        shootButton.style.backgroundColor = "";
    }
    else {
        shootButton.style.backgroundColor = "red";
    }

    setTimeout(gameLoop, 600);
}

//随机生成一个排除两点的坐标
function randomLocal(p1, p2) {
    let locals = []
    let randX = Math.floor(Math.random() * 6);
    let randY = Math.floor(Math.random() * 6);
    locals.push(randX, randY)

    //判断随机生成的点与参数中的两点是否相同，相同则递归生成新点，不同则返回存这个点的数组
    if ((p1.toString() == locals.toString()) || (p2.toString() == locals.toString())) {
        locals = randomLocal(p1, p2);
    }
    else {
        return locals;
    }
}

// 判断一个对象是否在另一个对象的某侧
function isCorrectDerection(common1, common2, derection) {
    switch (derection) {
        case "up": if ((common1.x == common2.x) && ((common1.y - common2.y) == 1)) return true;
        case "down": if ((common1.x == common2.x) && ((common2.y - common1.y) == 1)) return true;
        case "left": if ((common1.y == common2.y) && ((common1.x - common2.x) == 1)) return true;
        case "right": if ((common1.y == common2.y) && ((common2.x - common1.x) == 1)) return true;
    }
}

//检测两个对象是否在相邻的一格
function isNextTile(common1, common2) {
    if ((common1.x == common2.x) && (Math.abs(common1.y - common2.y) == 1)) return true;
    if ((common1.y == common2.y) && (Math.abs(common1.x - common2.x) == 1)) return true;
    if ((Math.abs(common1.x - common2.x) == 1) && (Math.abs(common1.y - common2.y) == 1)) return true;
    return false;
}

// 检测两个对象是否在同一格
function isSameTile(common1, common2) {
    if ((common1.x == common2.x) && (common1.y == common2.y)) return true;
    return false;
}

// 根据游戏结束时的游戏结果显示不同的提示
function gameOver(result) {
    if (result == "win") {

        ctx.fillStyle = "green";
        ctx.font = "50px Verdana";
        ctx.fillText("胜利", canvas.width - 200, canvas.height - 150);
    }
    if (result == "lost") {
        if (true) {
            monster.drawMonster(ctx);
            scene.drawWhteRect(ctx, monster.x, monster.y)
            ctx.fillStyle = "red";
            ctx.font = "50px Verdana";
        }

        ctx.fillText("失败", canvas.width - 200, canvas.height - 150);
    }
}


// 画出所有白色方块
function drawAllWhteRect() {
    whiteRectArray.forEach(element => {
        scene.drawWhteRect(ctx, element.x, element.y)
        // console.log(element.x + element.y)
    });
}


// 声明一个数组存放所有白色方块的位置
let whiteRectArray = [
    { x: 0, y: 0 }
]

console.log(whiteRectArray)

// 添加点击按钮监听事件
let upButton = document.getElementById("up");
let downButton = document.getElementById("down");
let leftButton = document.getElementById("left");
let rightButton = document.getElementById("right");
let shootButton = document.getElementById("shoot");
let shootUp = document.getElementById("shootup");
let shootDown = document.getElementById("shootdown");
let shootLeft = document.getElementById("shootleft");
let shootRight = document.getElementById("shootright");

upButton.addEventListener("click", movingUp)
downButton.addEventListener("click", movingDown)
leftButton.addEventListener("click", movingLeft)
rightButton.addEventListener("click", movingRight)
shootButton.addEventListener("click", shooting)
shootUp.addEventListener("click", shoot_up)
shootDown.addEventListener("click", shoot_down)
shootLeft.addEventListener("click", shoot_left)
shootRight.addEventListener("click", shoot_right)

// 射击按钮的激活状态
let shootbuttonOn = false;
// 本想将所有移动玩家的函数整合成一个，但却发现有问题
// function moving(derection){
//     scene.drawScene(ctx);
//     player.move(derection);
//     whiteRectArray.push({ x: player.x, y: player.y })
//     player.drawPlayer(ctx);
//     drawAllWhteRect();
// }



function shooting() {
    if (shootbuttonOn == false) {
        shootbuttonOn = true;
        shootUp.style.display = "";
        shootDown.style.display = "";
        shootLeft.style.display = "";
        shootRight.style.display = "";
        upButton.style.display = "none";
        downButton.style.display = "none";
        leftButton.style.display = "none";
        rightButton.style.display = "none";
    }
    else {
        shootbuttonOn = false;
        shootUp.style.display = "none";
        shootDown.style.display = "none";
        shootLeft.style.display = "none";
        shootRight.style.display = "none";
        upButton.style.display = "";
        downButton.style.display = "";
        leftButton.style.display = "";
        rightButton.style.display = "";
    }

    console.log(shootbuttonOn)
}

// 向不同方向射击
function shoot_up() {
    if (isCorrectDerection(player, monster, "up")) isSuccess = true;
    else {
        player.arrow--;
        console.log("arrow:" + player.arrow);
    }
}
function shoot_down() {
    if (isCorrectDerection(player, monster, "down")) isSuccess = true;
    else {
        player.arrow--;
        console.log("arrow:" + player.arrow);
    }
}
function shoot_left() {
    if (isCorrectDerection(player, monster, "left")) isSuccess = true;
    else {
        player.arrow--;
        console.log("arrow:" + player.arrow);
    }
}
function shoot_right() {
    if (isCorrectDerection(player, monster, "right")) isSuccess = true;
    else {
        player.arrow--;
        console.log("arrow:" + player.arrow);
    }
}

//移动玩家的函数
function movingUp() {
    scene.drawScene(ctx);
    player.move("up");
    whiteRectArray.push({ x: player.x, y: player.y })
    player.drawPlayer(ctx);
    drawAllWhteRect();
}
function movingDown() {
    scene.drawScene(ctx);
    player.move("down");
    whiteRectArray.push({ x: player.x, y: player.y })
    player.drawPlayer(ctx);
    drawAllWhteRect();
}
function movingLeft() {
    scene.drawScene(ctx);
    player.move("left");
    whiteRectArray.push({ x: player.x, y: player.y })
    player.drawPlayer(ctx);
    drawAllWhteRect();
}
function movingRight() {
    scene.drawScene(ctx);
    player.move("right");
    whiteRectArray.push({ x: player.x, y: player.y })
    player.drawPlayer(ctx);
    drawAllWhteRect();
}

gameLoop();